<template>
	<view>
    <view class="regin-select" >
      <biaofun-region class="regin-select-text" :defaultValue="currentCityInfo" @change="chengPos" ></biaofun-region>




    </view>
		<view class="map-wrap">
			<map :markers="ms" id="dd" ref="dd" show-location="true" class="map" ></map>
		</view>
		<view class="store-wrap" @tap="selectShop" :id="item.id" v-for="(item, index) in storeList" :key="index" >
			<view :class="{'select-store-item':current==item.id}" class="store-item d-flex align-items-center just-content-center">
				<view class="item-left item">
					<view class="store-name">{{ item.zzjg_name }}</view>
					<view class="xd-wrap" v-if="inTimeRange[item.id]==false">
						<view class="ws-wrap d-flex align-items-center just-content-center"  v-if="shopCounts[index]<0">
							<view class="now">NOW</view>
							<view class="zz-wrap">现在下单，立即制作</view>
						</view>
						<view class="phone_info bg-white " style="position: relative" v-if="(shopCounts[index]>0&&inTimeRange[item.id]==false)&&!item.is_close">
							<progress percent="10"   stroke-width="12" border-radius="5" style="width: 150px"></progress>
							<text style="position: absolute;top: -1.5rpx;left:16rpx;font-size: 19rpx">{{shopOCounts[index]}}单/{{shopCounts[index]}}杯制作中</text>
						</view>
					</view>
					<view class="store-address">
						<i class="iconfont icon-duomeitiicon-"></i>
						<text>{{ item.jiedao }}</text>
					</view>
					<view class="store-time">
						<i class="iconfont icon-time"></i>
						<text>{{item.open_time+"-"+item.end_time}}</text>
					</view>
          <view class="store-time" style="position: relative;top:14rpx" v-if="inTimeRange[item.id]==true|| item.is_close">
            <text class="region-select-text" style="">已打烊</text>
          </view>
					<view class="ad-wrap">
						<view class="ad-item" v-for="(vo, i) in item.ad" :key="i">{{ vo.name }}</view>
					</view>
				</view>
				<view @tap.stop="function(res){goBuy(res,null,item.juli,item.is_close)}" :id="item.id" :data-isclose="item.is_close" class="item item-right d-flex flex-column align-items-center just-content-center" style="height: 100%">
					<view class="qxd"  >去下单</view>
					<view class="jl">距离{{ $api.jizhiConvert(item.juli) }}</view>
				</view>
			</view>
		</view>
		<view style="clear:both"></view>
	</view>
</template>

<script>
import biaofunRegion from '@/components/biaofun-region/biaofun-region.vue'
	export default {
    components: {
      biaofunRegion
    },
		data() {
			return {
        inTimeRange:{},
        openRangeTime:"9:00-23:00",
				shopCounts:[2],
				shopOCounts:[2],
			  isChange:"",
              currentPos:{},
			  currentCityInfo:[],
			  storeMap:{},
              current:-1,
				ms: [{
					id: 1,
					latitude: 34.36025,
					longitude: 108.728,
					width: 30,
					height: 30,
          iconPath:"/static/logo.png",
				}],
				markers1 : [{
				  id: 0,
				  latitude: 30.266786,
				  longitude: 120.10675,
				  width: 19,
				  height: 31,
				  iconPath: 'https://tangbantian.oss-cn-beijing.aliyuncs.com/imgs/ccf89a067b464910a02838a268c268dc.png',
				  callout: {
				    content: 'callout',
				  },
				}],
				storeList: [
					{
						name: "郑州朗月公园茂",
						address: "赤乌恒星系中华人民共和国河南省郑州市高新区朗月公园茂",
						time: "9-21",
						distance: "1.2",
						ad: [
							{ name: "多肉离职右手" },
							{ name: "水蜜桃右手" },
							{ name: "碧根果右手" }
						]
					},
					{
						name: "郑州朗月公园茂",
						address: "赤乌恒星系中华人民共和国河南省郑州市高新区朗月公园茂",
						time: "9-21",
						distance: "1.2",
						ad: [
							{ name: "多肉离职右手" },
							{ name: "水蜜桃右手" },
							{ name: "碧根果右手" }
						]
					}
				]
			};
		},
     onLoad(option) {
      // this.storeList = JSON.parse(decodeURIComponent(option.cityShops));
		this.storeList = uni.getStorageSync("currentcityShops")
        this.getDefalutDisplay()
    },
    methods:{
      changeArea(result) {
        console.log('area change', result);
      },
      getShops(province,city,district,lat,lng){
        console.log("BRAND",this.$api.brandId)
        this.$api.ajax({
          url: "/web/app-zzjg/zzjg-list",
          data: {
            lat: lat,
            lng: lng,
            sheng: province,
            shi: city,
            brandId: this.$api.brandId
          },
          method: "get",
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          success:(res)=> {
            // console.log(res);
            const { data } = res
            console.log("dddd",data)
            uni.setStorageSync("currentcityShops",data.data)
            this.storeList = data.data
            for(let store of this.storeList){
              this.$set(this.inTimeRange,store.id,this.$api.isOpenInRangeTime(store))
            }
            this.$api.customStoreageManage.setStorage("currentcityShopsP", data.data,1)
            this.init()

          }
        });



      },
	  	getCookNum (item,index){
			//this.$set(this.shopCounts,index,8)
			let that = this
			//that.$set(that.shopCounts,index,10)
			this.$api.ajax({
				url: "/web/app-order/get-order-in-cook-count",
				// method: "post",
				data: {
					zzjgId:item.id,
					userId: uni.getStorageSync("userId")
				},
				success: (res) => {
					const { data } = res.data || {};
					const { items } = data || {};
					//item.id = 10
					console.log("index",index)
					//that.$set(that.shopCounts,index,10)
					if(data!=null&&data.length>0){

						//this.$set(item,'ccount',10)
						let cnum = data[0]
						let yunying = Math.floor((Math.random()*3)+1)
						cnum.ocount = cnum.ocount+yunying
						cnum.ccount = cnum.ccount+yunying
						cnum.time = cnum.ccount*2
						this.$set(this.shopOCounts,index,cnum.ocount)
						this.$set(this.shopCounts,index,cnum.ccount)
					}
					console.log("abc",this.shopCounts)
				}
			});
		},
      chengPos(res){
        console.log(res)
        console.log("BBBBB",this.$api.brandId)
        let [sheng,shi,xian] = res
        let posStr = sheng.name + shi.name +xian.name
        if(posStr === this.isChange){
          return
        }else{
          this.isChange = posStr
        }
        let xianName = "";
        if(xian.id != -999){
          xianName = xian.name
        }
        console.log(sheng,shi,xianName)
        this.$api.ajax({
          url: "/web/app-zzjg/zzjg-list",
          data: {
            lat: this.currentPos.latitude,
            lng: this.currentPos.longitude,
            sheng: sheng.name,
            shi: shi.name,
            quxian: xianName,
            brandId: this.$api.brandId
          },
          method: "get",
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          success:(res)=> {
            // console.log(res);
            const { data } = res
            console.log("dddd",data.data)
            this.storeList = data.data
            this.init()


          }
        });
      },
	  	selectShop(res){
			console.log("select",res)
			// let {currentTarget} = res
			// let {id} = currentTarget
			this.goBuy(res,-999)
		},
      goBuy(res,gobuy,argJuli,isClose) {

      	console.log("gobuy",res)
      	console.log("gobuy",isClose)
        let {currentTarget} = res
        let {id} = currentTarget
		     console.log(id)
        if(this.inTimeRange[id] ||isClose){
          uni.showToast({
            title: "当前店铺已打样\n明天再来吧",
            icon: 'none',
            duration: 2000
          });
            return;
        }
        this.current = id
        let currentStore = {}
        for(let store of this.storeList){
          if(id == store.id){
            currentStore = store
            break
          }
        }
        let marker  = {
          id: currentStore.id,
          latitude: currentStore.zlat,
          longitude: currentStore.zlng,
          width: 20,
          height: 20,
          iconPath:'/static/logo.png',
          callout:{content:currentStore.zzjg_name+"  >",display:"ALWAYS",padding:10,borderRadius:7 ,fontSize:12}
        }
        this.ms.push(marker)
        this.storeMap.moveToLocation({
          longitude: currentStore.zlng,
          latitude: currentStore.zlat
        })
		  if(gobuy==-999){
			  return;
		  }else{
			  console.log("跳转到下单页面",argJuli*1000)
			  if((argJuli*1000)>=1000){ //大于1000米后提示远
				  uni.showModal({
					  title:"当前店铺距离您较远,要继续点单么？",
					  success:(reback)=>{
						  if (reback.confirm) {
							  console.log('用户点击确定',currentStore);
							  //缓存用户所选位置 缓存5分钟
							  this.$api.customStoreageManage.setStorage("userSelect",currentStore,5)
							  //uni.setStorageSync("userSelect", currentStore);
							  uni.reLaunch({
								  url: "/pages/index/index?selectStore="+encodeURIComponent(JSON.stringify(currentStore))
							  })
						  } else if (reback.cancel) {
						  }
					  }
				  })
			  }else{
				  console.log('用户点击确定1',currentStore);
				  //uni.setStorageSync("userSelect", currentStore);
				  this.$api.customStoreageManage.setStorage("userSelect",currentStore,5)
				  uni.reLaunch({
					  url: "/pages/index/index?selectStore="+encodeURIComponent(JSON.stringify(currentStore))
				  })
			  }

		  }
        console.log(id)
      },
      async init(){
        for(let [index,store] of this.storeList.entries()){
          let {zlat,zlng,zzjg_name,id,sheng,shi} = store;
          console.log("xxx",index,zlat,zlng,store.id)
          let {favicon} = await this.$api.getBrandInfo();
		  console.log("favicon",favicon)
          let marker  = {
            id: store.id,
            latitude: zlat,
            longitude: zlng,
            width: 40,
            height: 40,
            iconPath: favicon,
            callout:{content:zzjg_name+"  >",display:"ALWAYS",padding:10,borderRadius:7 ,fontSize:12}
          }
		  	this.ms.push(marker)
           if(index == 0){
            this.current =  id
            this.storeMap.translateMarker({
              markerId: store.id, // 必填
              destination: {
                longitude: zlng,
                latitude: zlat // 必填
              }
            })
            this.storeMap.moveToLocation({
              longitude: zlng,
              latitude: zlat
            })
          }



          break
          // this.m.lat = zlat
          // this.m.lng = zlng
        }
      },
      async getDefalutDisplay(){
        let brandId = this.$api.brandId;
        let p = '河南省';
        let s = '郑州市';
        if(brandId == 1){
          console.log("糖")
        }else if(brandId ==2){
          p = '陕西省';
          s = '咸阳市'
        }

        for(let [index,item] of this.storeList.entries()){
          let {sheng,shi} = item
          this.$set(this.currentCityInfo,0,sheng)
          this.$set(this.currentCityInfo,1,shi)
          this.$set(this.currentCityInfo,2,"全部地区")
          this.isChange = sheng + shi + "全部地区"
          this.getCookNum(item,index)
          //this.$set(this.shopCounts,index,5)

        }
        if(this.storeLis!==null||this.this.storeLis.length==0){
          this.$set(this.currentCityInfo,0,p)
          this.$set(this.currentCityInfo,1,s)
          this.$set(this.currentCityInfo,2,"全部地区")
          this.isChange = p + s + "全部地区"
        }
        console.log("cityshops",this.storeList)
        let loca = await this.$api.getWxLocation();
        console.log("->"+JSON.stringify(loca))
        this.currentPos = loca
        console.log('当前位置的经度：' + this.currentPos.longitude);
        console.log('当前位置的纬度12：' + this.currentPos.latitude);
        this.getShops(p,s,"全部地区",this.currentPos.latitude,this.currentPos.longitude);

      }
    },
		mounted() {
      this.storeMap = uni.createMapContext("dd", this)
		// 	this.storeList = uni.getStorageSync("currentcityShops")
			console.log("怎么回事",this.storeList)
      this.init()



		},
	}
</script>

<style lang="scss" scoped>
  .regin-select{
	/* #ifdef MP-ALIPAY */
    height: 0.4rem;
	.regin-select-text{
	  line-height: 0.4rem;
	
	}
	/* #endif */
	/* #ifdef MP-WEIXIN */
	height: 4rem;
	.regin-select-text{
	  line-height: 4rem;
	
	}
	/* #endif */
    text-align: left;
    /* margin: auto 10px; */
    background-color: white;

  }
	page {
		height: 100vh;
	}

	.map-wrap {
		.map {
			height: 490upx;
			width: 100%;
		}
	}

	.store-wrap {
    .select-store-item{
		/* #ifdef MP-WEIXIN */
      border: 0.1rem solid orange;
	  /* #endif */
	  /* #ifdef MP-ALIPAY */
	  border: 1px solid orange;
	  /* #endif */
    }
		.store-item {
      margin: 20upx auto 0;
      height: 288upx;
			width: 690upx;

      border-radius: 0.5rem;
			background-color: #fff;
			box-sizing: border-box;
			&.active {
				border: 1px solid pink;
			}
			.item-left {
				width: 100%;
				padding: 0 30upx;
				$color: #dcad7a;
				.store-name {
					font-size: 25upx;
					color: #383838;
				}
				.xd-wrap {
					text-align: left;
					margin: 10upx 0;
					.ws-wrap {
						border-radius: 4upx;
						width: 220upx;
						.now {
							height: 28upx;
							color: #fff;
							background-color: #343434;
							font-size: 16upx;
							line-height: 28upx;
							width: 60upx;
							text-align: center;
						}
						.zz-wrap {
							height: 28upx;
							color: #fff;
							background-color: $color;
							font-size: 16upx;
							line-height: 28upx;
							width: 160upx;
							text-align: center;
						}
					}
				}
				.store-address {
					font-size: 22upx;
					color: #454545;
					.iconfont {
						font-size: 22upx;
						padding-right: 8upx;
					}
					margin-bottom: 10upx;
				}
				.store-time {
					font-size: 18upx;
					color: #454545;

					.iconfont {
						font-size: 18upx;
						padding-right: 8upx;
					}
				}
				.ad-wrap {
					margin-top: 20upx;
					.ad-item {
						height: 34upx;
						font-size: 20upx;
						line-height: 34upx;
						box-sizing: content-box;
						border: 1px solid $color;
						color: $color;
						display: inline-block;
						padding: 0 8upx;
						border-radius: 4upx;
						margin-right: 10upx;
					}
				}
			}
			.item-right {
				width: 150upx;
				height: 208upx;
				border-left: 1px solid #ededed;
				text-align: center;
				.qxd {
					font-size: 24upx;
					color: #060606;
					text-align: center;
				}
				.jl {
					font-size: 18upx;
					color: #454545;
				}
			}
		}
	}
	/* #ifdef MP-ALIPAY */
	.region-select-text{
		background-color: grey;
		padding: 10rpx;
		border-radius: 10rpx;
		margin-top: 6px;
		color: white;
		font-size: 0.2rem;
	}
	/* #endif */
	/* #ifdef MP-WEIXIN */
	.region-select-text{
		background-color: grey;
		padding: 10rpx;
		border-radius: 10rpx;
		margin-top: 5px;
		color: white;
		font-size: 0.7rem;
	}
	/* #endif */
</style>
